
<style>
        .xx_search_input{
            padding-left: 15px;
            padding-right: 15px;
            background: rgb(23,23,23);
            border-radius: 33px;
            height: 38px;
            display: flex;
            align-items: center;
            position: relative;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            margin: 10px;
            width: 20px;
        }
        .xx_input {
            width: 100%;
            height: 38px;
            background: 0 0;
            border: 0;
            outline: 0;
            line-height: 29px!important;
            position: relative;
            font-size: 15px;
            color: white;
        }
        .send-card{
            position: relative;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        }
        .xx-flex-c{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 10px;
        }
        .xx-flex-c span{
            font-size: 10px;
            color: rgb(134,134,134);
        }
    </style>
</style>
<script>
    sendcard={
        init: function (data,talk,like) {
            window["_dc_sendcard_data_"] = data;
            window["_dc_sendcard_talk_"] = talk;
            window["_dc_sendcard_like_"] = like;
            window["_dc_sendcard_send_"] = send;
            //选择样式并插入
            if(window["_dc_sendcard_data_"].style=='black'){
                $(window["_dc_sendcard_data_"].id).append(`        <div style="background-color: rgb(17,17,17);">
                    <div style='height: 5px;'></div>
                    <hr style='background-color:rgb(34, 34, 34); height:1px; border:none;'>
                    <div class="send-card">
            
                        <div class="xx_search_input">
                            <img style="width: 24px;height: 24px;" src="./img/write.png" />
                            <input id="send_card_input" placeholder="作为全村的骄傲，我有话说" type="text" class="xx_input">
                
                        </div>
                        <div id="send_card_button_talk" class="xx-flex-c">
                            <img style="width: 24px;height: 24px;" src="./img/talk.png" />
                            <span id='send_card_talk'>134</span>
                        </div>
                        <div id="send_card_button_like" class="xx-flex-c">
                            <img style="width: 24px;height: 24px;" src="./img/like.png" />
                            <span id='send_card_like'>690</span>
                        </div>
                    </div>
                </div>`);
            }else{
                $(window["_dc_sendcard_data_"].id).append(`        <div style="background-color: rgb(255, 255, 255);">
                    <div style='height: 5px;'></div>
                    <hr style='background: rgb(241, 242, 244); height:1px; border:none;'>
                    <div class="send-card">
            
                        <div class="xx_search_input">
                            <img style="width: 24px;height: 24px;" src="./img/write.png" />
                            <input id="send_card_input" placeholder="作为全村的骄傲，我有话说" type="text" class="xx_input">
                
                        </div>
                        <div id="send_card_button_talk" class="xx-flex-c">
                            <img style="width: 24px;height: 24px;" src="./img/talk.png" />
                            <span id='send_card_talk'>134</span>
                        </div>
                        <div id="send_card_button_like" class="xx-flex-c">
                            <img style="width: 24px;height: 24px;" src="./img/like.png" />
                            <span id='send_card_like'>690</span>
                        </div>
                    </div>
                </div>`);
                $('.xx_search_input').css('background','#f1f2f4');
                $('.xx_search_input input').css('color','black');
            }
            //赋值初始的讨论数和喜欢数
            $('#send_card_talk').text(window["_dc_sendcard_data_"].talk);
            $('#send_card_like').text(window["_dc_sendcard_data_"].like);
            //talk点击回调
            $('#send_card_button_talk').click( function(){
                window["_dc_sendcard_talk_"]($('#send_card_input').val());
            } );
            //like点击回调
            $('#send_card_button_like').click( function(){
                var data={}
                if($('#send_card_button_like img').attr('src')=='./img/like.png'){
                    $('#send_card_button_like img').attr('src', './img/like2.png');
                    data.like=true;
                    $('#send_card_like').text(parseInt($('#send_card_like').text()) +1);
                }else{
                    $('#send_card_button_like img').attr('src', './img/like.png');
                    data.like=false;
                    $('#send_card_like').text(parseInt($('#send_card_like').text()) -1);
                }
                data.msg=$('#send_card_input').val();
                window["_dc_sendcard_like_"](data);
                } );
            //监听回车事件
                $(document).keyup(function(event){
                    if(event.keyCode ==13){
                        window["_dc_sendcard_talk_"]($('#send_card_input').val());
                    }
                });
        }
    }
</script>
